<template>
	<view class="headLine">
		<view class="f f_align f_align_center t_item_line" @click="$navTo('./itemList')">
			<view class="AppName overfont" v-if="itemId && itemId != ''">{{itemName}}</view>
			<view v-else>请选择哪条广告上头条</view>
			<i class="iconfont iconzu5536"></i>
		</view>
		<!--组件-->
		<swiperNavBar
			:scrollIntoView="0"
			:swiperTabList='swiperTabList'
			:activeTabIdx='activeTabIdx'
			currentSwiperWidth="50%"
			:currentSwiperHeight="80"
			swiperCurrentSize='26rpx'
			swiperColor='#1A1A1A'
			swiperCurrentColor='#2989FD'
			:currentSwiperLineShow="true"
			currentSwiperLineActiveWidth="100rpx"
			currentSwiperLineActiveHeight="6rpx"
			currentSwiperLineActiveBg="#2989FD"
			:currentSwiperLineAnimatie="300"
			swiperBgColor="#FFF"
			@change="switchTab">
		</swiperNavBar>

		<view class="index_swiper" v-if="activeTabIdx == 0">
			<view class="f f_align f_align_center">
				<text class="bold">请选择推广次数</text>
				<text class="autoLines" @click="showTime = !showTime">自定义</text>
			</view>
			<view class="swiper_warp_l">
				<view
					v-for="(item,index) in swiper" :key="index"
					class="swiper_warp_item"
				>
					<view
						:class="showTimesCount == item ? 'swiper_warp_item_ii bold active' : 'swiper_warp_item_ii bold'"
						@click="setCount(item)"
					>
						{{item}}次
					</view>
				</view>
			</view>
			<view v-if="showTime" class="input_www f f_align_center">
				<input @input="chageVal" v-model="showTimesCount" type="number" placeholder="请输入首页轮播推广次数" />
				<view class="">次</view>
			</view>
		</view>
		<view class="index_swiper" v-else>
			<view class="f f_align f_align_center">
				<text class="bold">请选择推广天数</text>
				<text class="autoLines" @click="showDays = !showDays">自定义</text>
			</view>
			<view class="swiper_warp_l">
				<view
					v-for="(item,index) in headLine" :key="index"
					class="swiper_warp_item"
				>
					<view
						:class="showDaysCount == item ? 'swiper_warp_item_ii bold active' : 'swiper_warp_item_ii bold'"
						@click="setDays(item)"
					>
						{{item}}天
					</view>
				</view>
			</view>
			<view v-if="showDays" class="input_www f f_align_center">
				<input @input="chageVal" v-model="showDaysCount" type="number" placeholder="请输入推广天数" />
				<view class="">天</view>
			</view>
		</view>


		<view class="f f_column bb_warps">
			<view class="tt_title bold">推广说明</view>
			<text>
				1.推广时间为07:00 - 24:00，其他时间不计算推广次数
				2.如果首页轮播满了，则根据支付顺序自动排序
				3.xxxx
				4.xxxx
				5.xxx
			</text>
		</view>

		<view class="f f_align f_align_center step_bottom_btn">
			<view class="f f_price">
				价格：<view class="f_p_j bold">{{goldCoinAmountAll}}<text class="f_p_t">金币</text></view>
			</view>
			<view class="relese_new" @click="nowReserve">立即支付</view>
		</view>

		<!-- 密码验证 -->
		<pwInput ref="pwInput" @input-ok="isOkDone" :isLoading="loadings" />
	</view>
</template>

<script>
	import pwInput from '@/components/pwInput/pwInput'
	export default {
		components:{
			pwInput
		},
		data() {
			return {
				itemId:'',
				itemName:'',


				goldCoinAmount:0,
				activeTabIdx: 0,
				showType:'10009001',
				swiperTabList: [
					{
						index: 0,
						name: '首页轮播',
						value: '10009001'
					},
					{
						index: 1,
						name: '固定头条',
						value: '10009002'
					}
				],
				swiper:[100,200,500,1000,2000,5000],
				headLine:[1,2,5,10,20,30],

				showTimesCount:0,
				showDaysCount:0,

				showTime:false,
				showDays:false,

				loadings:false
			};
		},
		onLoad(option) {
			if(option.itemId){
				this.itemId = option.itemId;
				this.itemName = option.itemName;
			}
		},
		computed:{
			goldCoinAmountAll:function(){
				let num = this.goldCoinAmount*this.showTimesCount;
				if(this.showType == '10009002'){
					num = this.goldCoinAmount*this.showDaysCount;
				}
				return (num).toFixed(2);
			}
		},
		onShow() {
			if(this.activeTabIdx === 0){
				//查询规则 -- 轮播
				this.getRechangeRules('10012003');
			}else{
				//固定头条
				this.getRechangeRules('10012004');
			}
		},
		methods:{
			// tab切换
			switchTab (item) {
				this.activeTabIdx = item.index;
				this.showType = item.value;
				if(item.index == 0){
					//查询规则 -- 轮播
					this.getRechangeRules('10012003');
				}else{
					//固定头条
					this.getRechangeRules('10012004');
				}
			},
			//获取任务收费规则
			async getRechangeRules(type){
				const _this = this;
				let res = (await _this.$http('/api/auth/charge/rule/getChargeRule','POST',type)).data;
				if(res && res.code == '0'){
					_this.goldCoinAmount = res.data.goldCoinAmount;
				}else{
					_this.$showToast(res.msg);
				}
			},
			setCount(item){
				this.showTimesCount = item;
			},
			setDays(item){
				this.showDaysCount = item;
			},
			chageVal(e){
				const _this = this;
				let val = e.target.value;
				setTimeout(()=>{
					if(val != ''){
						let n = Math.abs(parseInt(val));
						if(this.showType == '10009001'){
							this.showTimesCount = n;
						}else{
							this.showDaysCount = n;
						}
					}
				},200);
			},
			//立即支付
			async nowReserve(){
				const _this = this;
				if(_this.itemId == ''){
					return _this.$showToast('请先选择要上的项目哦～');
				}
				if(_this.showType == '10009001' && _this.showTimesCount <= 0){
					return _this.$showToast('请先选择推广次数(大于0)～');
				}
				if(_this.showType == '10009002' && _this.showDaysCount <= 0){
					return _this.$showToast('请先选择推广天数(大于0)～');
				}
				//打开密码验证
				_this.$refs.pwInput.visibleToast = true;
			},
			//密码验证通过
			async isOkDone(pw){
				const _this = this;
				_this.loadings = true;
				let res = (await _this.$http('/api/auth/item/show/order/orderCreate','post',{
					businessId:_this.itemId,
					password:pw,
					payAmount:_this.goldCoinAmountAll,
					showType:_this.showType,
					showDaysCount:_this.showType == '10009002' ? _this.showDaysCount : '',
					showTimesCount:_this.showType == '10009001' ? _this.showTimesCount : ''
				})).data;
				_this.loadings = false;
				if(res && res.code == '0'){
					//关闭密码验证
					_this.$refs.pwInput.visibleToast = false;
					_this.$showToast(_this.showType == '10009001' ? '上首页轮播成功～' : '固定头条成功～');
					_this.showDaysCount = 0;
					_this.showTimesCount = 0;
				}else{
					_this.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headLine{
		width: 100%;
		min-height: 100vh;
		border-top: solid 1rpx #E6E6E6;
		background-color: #F6F6F6;
		.t_item_line{
			padding: 36rpx 24rpx;
			color: #999;
			background-color: #fff;
			margin-bottom: 16rpx;
			.AppName{
				color: #1A1A1A;
			}
		}
		.input_www{
			width: 100%;
			padding: 24rpx 0;
			input{
				width: 90%;
				padding: 0 24rpx;
				height: 70rpx;
				border-radius: 8rpx;
				border: solid 1rpx #E6E6E6;
				margin-right: 20rpx;
			}
		}
		.bb_warps{
			font-size: 28rpx;
			color: #1A1A1A;
			padding: 64rpx 24rpx;
			.tt_title{
				margin-bottom: 16rpx;
			}
		}
		.index_swiper{
			border-top: solid 1rpx #E6E6E6;
			background-color: #fff;
			padding: 36rpx 24rpx 30rpx;
			.autoLines{
				font-size: 24rpx;
				color: $ych_color;
			}
			.swiper_warp_l{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;
				.swiper_warp_item{
					width: 33.33%;
					flex-shrink: 0;
					@include flex_center;
					margin-top: 24rpx;
					.swiper_warp_item_ii{
						width: 200rpx;
						height: 110rpx;
						border: solid 2rpx #EEEEEE;
						border-radius: 3rpx;
						@include flex_center;
						font-size: 30rpx;
						color: #333;
						&.active{
							border-color: #2989FD;
							background-color: #E7F0FF;
							color: $ych_color;
						}
					}
				}

			}
		}
		.step_bottom_btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;right: 0;
			height: 98rpx;
			background-color: #fff;
			padding-left: 32rpx;
			.relese_new{
				height: 100%;
				width: 272rpx;
				background-color: $ych_color;
				@include flex_center;
				color: #fff;
				font-size: 36rpx;;
			}
			.f_price{
				font-size: 22rpx;
				color: #1A1A1A;
				align-items: flex-end;
				.f_p_j{
					font-size: 40rpx;
					color: #E6212A;
					padding: 0 6rpx;
					.f_p_t{
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>
